'use strict';

import React from 'react';
import Radium from 'radium';
import { BoxInput } from 'lightbi-front-widget';
import { mobileOrEmailValidate, loginPasswordValidate, LoginInfo, ScreenType, Goto, IN_DEPLOY_URI, Base64 } from 'lightbi-front-utils';
import { UniqueType, UserController } from 'lightbi-front-project';

@Radium
class LoginForm extends React.Component {
  Props : {
    router : any;
    location : any;
  };

  state : {
    isSubmit : boolean;
    errorMsg : string;
  };

  constructor(props : Props) {
    super(props);
    this.state = { isSubmit : false, errorMsg : "" };
    (this: any).onSubmit = this.onSubmit.bind(this);
    (this: any).afterSubmitResolve = this.afterSubmitResolve.bind(this);
    (this: any).afterSubmitReject = this.afterSubmitReject.bind(this);
    (this: any).gotoForgetPassword = this.gotoForgetPassword.bind(this);
    (this: any).gotoRegister = this.gotoRegister.bind(this);
    this.jumpUri = this.props.location.query['jumpUri'];
  }

  afterSubmitResolve(userVoucher) {
    if(!userVoucher.getIsAdmin()) {
      this.afterSubmitReject('非管理员账户, 不能登录');
      return;
    }

    LoginInfo.login(userVoucher.getEnterpriseId(),
                    userVoucher.getUserId(),
                    userVoucher.getJwt(),
                    false,
                    true);

    if(this.jumpUri == null || this.jumpUri.length == 0)
      Goto('/admin/projects', this.props.router);
    else
      Goto(Base64.decode(this.jumpUri), this.props.router);
  }

  afterSubmitReject(errorMsg) {
    this.setState({isSubmit : false, errorMsg : errorMsg});
    setTimeout(()=> {
      this.setState({errorMsg : null});
    }, 1000);
  }

  onSubmit() {
    if(this.refs.uniqueId.isValid() && this.refs.password.isValid()) {
      this.setState({isSubmit : true});
      var uniqueId = this.refs.uniqueId.getValue();
      var type = UniqueType.EMAIL;
      if(uniqueId.indexOf('@') == -1)
        type = UniqueType.MOBILE;

      UserController.login(true, this.refs.uniqueId.getValue(), type, this.refs.password.getValue(), this.afterSubmitResolve, this.afterSubmitReject);
    } else if(!this.refs.uniqueId.isValid()) {
      this.setState({errorMsg : '请输入注册手机'});
      setTimeout(()=> {
        this.setState({errorMsg : null});
      }, 1000);
    } else if(!this.refs.password.isValid()) {
      this.setState({errorMsg : '请输入有效密码'});
      setTimeout(()=> {
        this.setState({errorMsg : null});
      }, 1000);
    }
  }

  gotoForgetPassword() {
    if(this.jumpUri == null || this.jumpUri.length == 0)
      this.props.router.push(IN_DEPLOY_URI + '/entrance/forgetPassword');
    else
      this.props.router.push(IN_DEPLOY_URI + '/entrance/forgetPassword?jumpUri=' + this.jumpUri);
  }

  gotoRegister() {
    if(this.jumpUri == null || this.jumpUri.length == 0)
      this.props.router.push(IN_DEPLOY_URI + '/entrance/register');
    else
      this.props.router.push(IN_DEPLOY_URI + '/entrance/register?jumpUri=' + this.jumpUri);
  }

  render() {
    var buttonClass = "btn btn-primary " + (this.state.isSubmit ? " disabled " : "");
    var buttonDiv = null;
    if(this.state.isSubmit)
      buttonDiv = <button className={buttonClass} style={{ marginRight: '5px', marginTop: '10px', minWidth: '120px' }} type="submit" onClick={this.onSubmit} >
                    登录中
                    <i className="fa fa-spinner fa-spin" style={{marginLeft: '5px'}} />
                  </button>;
    else
      buttonDiv = <button className={buttonClass} style={{ marginRight: '5px', marginTop: '10px', minWidth: '120px' }} type="submit" onClick={this.onSubmit} >
                    登录
                  </button>;

    return (
      <div style={{ width: '496px', height: '100%', display: 'inline-block', position: 'relative', marginTop : '60px', padding: '70px', '@media (max-width: 767px)': { width: '100%', paddingLeft: '15px', paddingRight: '15px', paddingTop: '40px' }}}>
        <div style={{paddingBottom: '15px', fontSize : '20px', fontWeight : 'bold'}}>登录</div>
        <div style={{ paddingTop: '15px', position: 'relative'}}>
          <div style={{marginBottom: '10px', width: '100%'}}>
            <BoxInput ref="uniqueId" placeholder="企业注册手机号" label="账号" validateFunc={mobileOrEmailValidate} isReadOnly={this.state.isSubmit} />
          </div>
          <BoxInput ref="password" type="password" placeholder="大于6位" label="密码" validateFunc={loginPasswordValidate} isReadOnly={this.state.isSubmit} />
          <div className="row" style={{ paddingTop: '20px', paddingBottom : '20px', margin : '0px' }}>
            <div className="col-xs-6" style={{ textAlign : 'left' }} >
              <a style={{ cursor : 'pointer' }} onClick={this.gotoForgetPassword} >忘记密码?</a>
            </div>
            <div className="col-xs-6 text-right">
              <a style={{  cursor : 'pointer' }} onClick={this.gotoRegister} >未注册?</a>
            </div>
          </div>
          <div style={{ textAlign : 'center' }} >
            <div style={{ position : 'relative', display : 'inline-block' }}>
              {
                buttonDiv
              }
              {
                !!this.state.errorMsg ?
                  <label style={{ left:'0px', bottom: '-30px', position: 'absolute', fontSize: '12px', color: '#f55753', display: 'block', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{this.state.errorMsg}</label>
                  :
                  null
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

module.exports=LoginForm;
